<template>
  <up-navbar
    :title="title"
    height="44"
    @rightClick="() => { }"
    :autoBack="false"
    :placeholder="true"
  >
    <template #left>
      <view class="custom-navbar-left">
        <up-text
          color="#333333"
          suffixIcon="arrow-down" 
          iconStyle="font-size: 28rpx; margin-left: 10rpx, line-height: 44rpx;"
          :text="currentItem?.name"
          margin="0"
          @click="isShow = true"
        ></up-text>
      </view>
    </template>
  </up-navbar>
  <CustomProjectPicker
    :show="isShow"
    @setShow="isShow = $event"
    @confirm="projectPickerConfirmHandler"
    @setDefaultValue="currentItem = $event"
  ></CustomProjectPicker>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CustomProjectPicker from '@/components/common/CustomProjectPicker/CustomProjectPicker.vue';
import { IProjectInfoProps } from "@/types/projectType";

defineProps({
  title: {
    type: String,
    default: '首页',
  },
});

const isShow = ref(false);
const currentItem = ref<IProjectInfoProps>();

const projectPickerConfirmHandler = (item: IProjectInfoProps) => {
  console.log('projectPickerConfirmHandler', item);
  currentItem.value = item;
}

const toAddProjectHandler = () => {
  uni.navigateTo({ url: '/pages/addProject/addProject' });
}

const scrolltolower = () => {
  console.log('scrolltolower');
}

</script>

<style lang="scss">
.custom-navbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.project-search-input-box {
  padding: 16rpx 30rpx;
}
</style>
